<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线聊天室</title>
</head>
<body>
    <input type="text" id="message">
    <input type="button" value="发送消息" onclick="sendMessage()">
    接收到的消息:
    <p id="server_message" style="background-color: red"></p>





<script>

    if(window.WebSocket){
        websocket= new WebSocket("ws://127.0.0.1:9001/ws");
        websocket.onopen=function (ev) {
            console.log("建立连接");
        }
        websocket.onclose=function (ev) {
            console.log("断开连接");
        }
        websocket.onmessage=function (ev) {
            console.log("接收到消息");

            var server_message = document.getElementById("server_message");
            server_message.innerHTML += ev.data+"<br/>";
        }


    }else {
        alert("游览器不支持web socket")
    }


    function sendMessage() {
      var message =  document.getElementById("message");
        websocket.send(message.value);
    }


</script>

</body>
</html>